<template>
  <div>
    <Swiper></Swiper>
    <div
      class="content"
      v-for="item of article"
      :key="item._id"
      @click="handleClick(item._id)"
    >
      <div class="header">
        <img :src="item.avatar" />
        <span>{{ item.date }}</span>
      </div>
      <div>{{ item.title }}</div>
      <div>
        <img :src="item.headImgSrc" />
      </div>
      <div>{{ item.content }}</div>
      <div class="text">
        <div>
          <img src="../../assets/icon/chat1.png" alt="" />
          <span>{{ item.postId }}</span>
        </div>
        <div>
          <img src="../../assets/icon/view.png" alt="" />
          <span>{{ item.collectNum }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "./component/Swiper.vue";
export default {
  components: {
    Swiper,
  },
  data() {
    return {
      article: [],
    };
  },
  methods: {
    handleClick(val) {
      this.$router.push(`/articleDetail/${val}`);
    },
  },
  mounted() {
    this.$http("http://122.112.161.135:4000/api/article/list").then((res) => {
      this.article = res.data.res;
    });
  },
};
</script>

<style scoped>
.content {
  border-top: 1px solid rgb(180, 180, 180);
  border-bottom: 1px solid rgb(177, 177, 177);
  margin-top: 40rpx;
  color: gray;
  font-size: 30rpx;
}
img {
  width: 100%;
}
.content > div {
  padding: 15px 0;
}
.header img {
  width: 80px;
  height: 80px;
  vertical-align: middle;
  margin-right: 30px;
}
.content > div:nth-child(2) {
  font-size: 40px;
  color: black;
  font-weight: 600;
}
.content > div:not(:nth-child(3)) {
  margin-left: 30px;
}
.content .text img {
  width: 50px;
  height: 50px;
  vertical-align: middle;
}
.content .text {
  display: flex;
}
.content .text div:nth-child(1) {
  margin-right: 30px;
}
</style>